<template>
  <el-dialog :model-value="value" width="700px" title="添加整栋" @close="handleClose" :fullscreen="device === 'mobile'" class="entire-building">
    <el-form :model="form" ref="entireBuildingRef" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="12" :xs="22">
          <el-form-item prop="groupId" label="分组" required>
            <el-select v-model="form.groupId" style="width: 100%;">
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="buildingName" label="整栋名称" required>
            <el-input v-model="form.buildingName" placeholder="请输入整栋名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="floors" label="总层数" required>
            <!-- <el-select v-model="form.groupId" :options="groupOptions" suffix-icon="层"></el-select> -->
            <el-input
              class="input-with-select"
            >
              <template #prepend>
                <el-select v-model="form.floors" placeholder="Select" @change="handleFloorsChange">
                  <el-option :label="item" :value="item" v-for="item in 99" :key="item" />
                </el-select>
              </template>
              <template #append>
                层
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="floorRooms" label="每层房间数" required>
            <el-input
              class="input-with-select"
            >
              <template #prepend>
                <el-select v-model="form.floorRooms" placeholder="Select" @change="handleFloorRoomsChange">
                  <el-option :label="item" :value="item" v-for="item in 99" :key="item" />
                </el-select>
              </template>
              <template #append>
                间
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="22">
          <el-form-item prop="roomPrefix" label="房间号前缀">
            <el-input v-model="form.roomPrefix" placeholder="请输入1位数字/英文" maxlength="1" @input="prefixChange"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="max-height: 200px;overflow-y:auto;">
        <div
          v-for="(item, index) in form.chamberNameList"
          :key="index"
          style="margin-top: 8px;margin-bottom: 8px;padding: 10px 16px;border-radius: 5px;background-color: var(--el-color-primary-light-9);">
          <el-row>
            <el-col :span="10" :xs="20">
              <el-form-item  label="所在楼层" :prop="`chamberNameList[${index}].floor`" required label-width="80px">
                <el-input
                  class="input-with-select"
                >
                  <template #prepend>
                    <el-select v-model="form.chamberNameList[index].floor" placeholder="Select" @change="handleFloorChange(item)">
                      <el-option :label="item" :value="item" v-for="item in 99" :key="item" />
                    </el-select>
                  </template>
                  <template #append>
                    层
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10" :xs="20">
              <el-form-item  label="房间数" :prop="`chamberNameList[${index}].room`" required label-width="80px">
                <el-input
                  class="input-with-select"
                >
                  <template #prepend>
                    <el-select v-model="form.chamberNameList[index].room" placeholder="Select" @change="handleRoomChange(item)">
                      <el-option :label="item" :value="item" v-for="item in 99" :key="item" />
                    </el-select>
                  </template>
                  <template #append>
                    间
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <div class="remove-wrap">
              <el-icon
                style="cursor: pointer;"
                color="var(--el-color-danger)"
                @click="removeFloor(index)">
                <Remove />
              </el-icon>
            </div>
          </el-row>
          <el-input disabled v-model="form.chamberNameList[index].roomNameList"></el-input>
        </div>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="AddEntireBuilding">
import useAppStore from '@/store/modules/app'
import group from '@/api/setting/group'
import { deepClone } from '@/utils/index'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  }
})
const groupOptions = ref([])
const device = computed(() => useAppStore().device)
watch(() => props.value, (visible) => {
  if (visible) reset()
})

const data = reactive({
  form: {
    groupId: undefined,
    buildingName: undefined,
    floors: 1,
    floorRooms: 1,
    roomPrefix: undefined,
    chamberNameList: [{
      floor: 1,
      room: 1,
      roomNameList: '101'
    }]
  }
})
const { form } = toRefs(data)


function reset() {
  form.value = {
    groupId: undefined,
    buildingName: undefined,
    floors: 1,
    floorRooms: 1,
    roomPrefix: undefined,
    chamberNameList: [{
      floor: 1,
      room: 1,
      roomNameList: '101'
    }]
  }
  proxy.resetForm('entireBuildingRef')
}

// 弹窗内容
// 房间前缀发生变化
function prefixChange(value) {
  form.value.chamberNameList.forEach((item, ind) => {
    item.roomNameList = Array(item.room).fill(1).map((val, index) => `${value ? value : ''}${item.floor}${index + 1 < 10 ? '0' : ''}${index + 1}`)
  })
}
// 总楼层选择框发生变化
function handleFloorsChange(cForm) {
  const length = form.value.chamberNameList.length
  if (form.value.floors > length) {
    console.log(form.value.floors - length);
    Array(form.value.floors - length).fill(1).forEach((item, ind) => {
      const floor = length + ind + 1
      form.value.chamberNameList.push({
        floor: floor,
        room: form.value.floorRooms,
        value: Array(form.value.floorRooms).fill(1).map((val, index) => `${form.value.roomPrefix ? form.value.roomPrefix : ''}${floor}${index + 1 < 10 ? '0' : ''}${index + 1}`)
      })
      console.log(form.value.chamberNameList);
    })
    form.value = deepClone(form.value)
  } else {
    form.value.chamberNameList = form.value.chamberNameList.slice(0, form.value.floors)
  }
  console.log('change: >>>', form.value)
}
// 总楼层房间数变化
function handleFloorRoomsChange(value) {
  console.log(value)
  form.value.chamberNameList.forEach((item, ind) => {
    form.value.chamberNameList[ind].room = value
    form.value.chamberNameList[ind].roomNameList = Array(value).fill(1).map((val, index) => `${form.value.roomPrefix ? form.value.roomPrefix : ''}${form.value.chamberNameList[ind].floor}${index + 1 < 10 ? '0' : ''}${index + 1}`)
  })
}
// 单楼层数发生变化
function handleFloorChange(item) {
  item.value = Array(item.room)
    .fill(1)
    .map((val, index) => 
    `${form.value.roomPrefix ? form.value.roomPrefix : ''}${item.floor}${index + 1 < 10 ? '0' : ''}${index + 1}`)
}
// 但楼层房间数发生变化
function handleRoomChange(item) {
  item.value = Array(item.room)
    .fill(1)
    .map((val, index) => 
    `${form.value.roomPrefix ? form.value.roomPrefix : ''}${item.floor}${index + 1 < 10 ? '0' : ''}${index + 1}`)
}

// 删除楼层
function removeFloor(index) {
  form.value.chamberNameList.splice(index, 1)
} 

function handleClose() {
  emit('cancel')
}

function handleOk() {
  proxy.$refs["entireBuildingRef"].validate(valid => {
    if (valid) {
      const params = {
        buildingName: form.value.buildingName,
        floors: form.value.chamberNameList,
        groupId: form.value.groupId
      }
      emit('ok', params)
    }
  }) 
}

// 获取分组列表
function getGroupList() {
  group.getList().then(res => {
    groupOptions.value = res.rows.map(item => ({
      label: item.groupName,
      value: item.groupId
    }))
    form.value.groupId = groupOptions.value[0].value
  })
}
getGroupList()
</script>
<style lang="scss" scoped>
.remove-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  margin-bottom: 18px 
}
</style>